<template>
  <div :style="{
          width: val.w + 'px',
          maxHeight: val.h + 'px'
       }">
    <el-card class="alarm-list-card">
      <div slot="header" class="clearfix">
        <span>告警信息</span>
        <span class="alarm-num"><span style="color: red">{{alarmList.length}}</span>&nbsp;条</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toggleAlarmList">
          {{showList?'隐藏':'显示'}}
        </el-button>
      </div>
      <ul class="alarm-list" v-if="showList" :style="{
        height: (this.val.h - 45)+'px'
      }">
        <li v-for="item in alarmList">
          <span class="alarm-name">{{item.name}}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{item.createTime}}</span>
        </li>
      </ul>
    </el-card>

  </div>
</template>
<script>
  import StylePane from './style.vue'
  import Style from "../../designer/components/panel/style";
  import dataMixin from '../mixins/data';
  const NAME = 'vpd-alarm-list';
  const setting = {
    type: NAME,
    dataType: 'json', //期望的数据格式
    x: 0,
    y: 0,
    w: 300,
    h: 300,
    minWidth: 200,
    minHeight: 200,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#E8EBEE',
    labelWidth: 100,
    labels: [],
    dataSource: {
      "name": "vpd-ds-interface",
      "serviceType": "defined",
      "code": "getDeviceAlarm",
      "paramList": [{
        "code": "deviceId",
        "type": "&",
        "value": "deviceId"
      }],
      "useFilter": false,
      "useRefresh": true,
      "refreshInterval": 30
    },
  };
  export default {
    mixins: [dataMixin],
    name: NAME,
    components: {Style},
    icon: 'vpd-alarm',
    title: '告警信息',
    panel: StylePane,
    setting: setting,
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        showList: false,
        setting: JSON.parse(JSON.stringify(setting)),
        alarmList: [],
      }
    },
    computed: {},
    watch: {},
    mounted() {
      if (!this.enableQueryData) { //模拟显示数据
        this.alarmList = [{
          name: 'B相电压缺相告警',
          createTime: '2020-04-01 11:59:04'
        }, {
          name: 'A相电压缺相告警',
          createTime: '2020-04-01 11:59:04'
        }]
      }
    },
    methods: {
      toggleAlarmList() {
        this.showList = !this.showList;
      },
      updateData(data) {
        this.alarmList = data.rows;
      }
    }
  }
</script>
<style lang="scss">
  .alarm-list-card {
    .el-card__body {
      padding: 0;
    }
  }
</style>
<style lang="scss" scoped>
  .alarm-num {
    margin-left: 20px;
    font-size: 14px;
  }

  .alarm-list {
    margin: 0;
    padding: 15px;

    overflow-y: auto;
    list-style: none;

    li {
      font-size: 14px;
      margin-bottom: 10px;

      .alarm-name {
        color: red;
      }
    }
  }

</style>
